import {Component, OnDestroy, OnInit, ViewEncapsulation} from '@angular/core';
import {Router, ActivatedRoute} from '@angular/router';
import {Subject, Observable} from 'rxjs';

import {ToolsService} from "@shared/service/tools/tools.service";
import {ToolbarService} from "@shared/components/toolbar/toolbar.service";
import {VideoService} from "../video.service";
import {VideoRespVO} from "@interface/index";


@Component({
  selector: 'video-detail',
  templateUrl: './video-detail.component.html',
  styleUrls: ['./video-detail.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class VideoDetailComponent implements OnInit, OnDestroy {
  public categoryId: number;
  public haveRcommend = false;
  public isTextHidden = false;
  public video: Observable<VideoRespVO>;
  public videoCateList: Array<VideoRespVO> = [];
  public ngUnsubscribe: Subject<void> = new Subject<void>();

  constructor(public route: ActivatedRoute,
              public router: Router,
              public videoService: VideoService,
              public toolsService: ToolsService,
              public toolBarService: ToolbarService) {
    this.video = videoService.video;
    route.params.takeUntil(this.ngUnsubscribe)
      .do(() => this.toolBarService.unfoldNav())
      .subscribe(params => {
        this.getVideoInfo(params['videoId']);
        const categoryId = params['categoryId'];
        if (categoryId) {
          this.categoryId = categoryId;
          this.getRecommendList(params['categoryId']);
        }
      });
  }

  /**
   * 获取视频信息
   * @param videoId :视频id
   */
  getVideoInfo(videoId: number | string) {
    this.videoService.getDeVideoDetail(videoId);
  };

  // 视频详情推荐列表
  getRecommendList(categoryId: number) {
    this.toolsService.showLoading();
    this.videoService.getVideoRecommendList(categoryId).takeUntil(this.ngUnsubscribe).subscribe(res => {
      this.toolsService.hideLoading();
      if (res.result === '0') {
        if (res.data.list.length) {
          this.videoCateList = res.data.list;
          this.haveRcommend = true;
        }
      }
    });
  };

  /**
   * 隐藏显示视频简介
   */
  introToggle() {
    return this.isTextHidden = !this.isTextHidden;
  };

  ngOnInit() {
  };

  ngOnDestroy() {
    this.ngUnsubscribe.next();
    this.ngUnsubscribe.complete();
  };
}
